<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Sample Java Project</title>
</head>

<body>
    <h1>This is Version V1.0.2.0</h1>
    <br />
    <div style="margin-bottom:20px">
        <h3 id="name_display">Hello</h3>
        <span>Your Name: </span>
        <input type="text" name="name" id="name">
        <input type="button" value="Submit" onclick="setName()">
    </div>
    <hr>
    <div style="margin-top:20px">
        <span> A: </span>
        <input type="text" name="a" id="a">
        <br/>
        <span> B: </span>
        <input type="text" name="b" id="b">
        <br/>
        <br/>
        <span> Result: </span>
        <input type="text" name="result" id="result">
        <input type="button" value="Calculate" onclick="getResult()">
    </div>
    <script>
        function calc() {
            var a = document.getElementById("a").value;
            var b = document.getElementById("b").value;

            var xmlHttp = new XMLHttpRequest();
            xmlHttp.open("GET", "/calc?a=" + a + "&b=" + b, false);
            xmlHttp.send();
            return xmlHttp.responseText;
        }

        function getResult() {
            var result = calc();
            document.getElementById("result").value = result;
        }

        function getName() {
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.open("GET", "/getName?t=" + Math.random(), false);
            xmlHttp.send();
            return xmlHttp.responseText;
        }

        function setName() {
            var name = document.getElementById('name_display');
            var newName = document.getElementById('name').value;
            name.innerHTML = 'Hello, ' + newName;

            var xmlHttp = new XMLHttpRequest();
            xmlHttp.open("GET", "/setName/" + newName, false);
            xmlHttp.send();
        }

        window.onload = function () {
            var name = document.getElementById('name_display');
            var oldName = getName();
            name.innerHTML = 'Hello, ' + oldName;
        }


    </script>

</body>

</html>